<template>
  <div class="pagination">
    <a href="javascript:;" @click="deduction">上一页</a>
    <a  href="javascript:;" v-for="(pag,index) in pages" :key="index"  @click="goto(pag)"  :class="{active: pag ===page}">{{pag}}</a>
    <a href="javascript:;" @click="score">下一页</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
         
    };
  },
  props: ["pages", "page"], //接收参数
  methods: {
    goto(pag) {
      //点击按钮给父组件传参  这里的参数也可以直接使用pag
      this.$emit("click-pag", pag);
      // console.log(this.pages);
      console.log(this.page);
    },
    // 上一页
    deduction() {
      if (this.page - 1 > 0) {
        this.$emit("click-pag", this.page - 1);
      } else {
        this.page = 1;
      }
    },
    // 下一页
    score() {
      //若果是最后一页
      if (this.page >= this.pages) {
        this.page = this.pages;
      } else {
        this.$emit("click-pag", this.page + 1);
      }
    },
  },
       
};
</script>

<style scoped>
a {
    text-decoration: none;
}

.pagination {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.pagination a {
    padding: 3px 10px;
    border: 1px solid #ddd;
    margin: 5px;
    color: black;
    font: 550 15px normal;
}


/* 点按钮变色 这里只是提前写好样式 如果为true在会变色 */

.pagination a.active {
    background: #00a1d6;
    color: white;
}

#pages2 ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    justify-content: space-between;
}

#pages2 li {
    flex: 25%;
}

#pages2 img {
    width: 100%;
    max-width: 120px;
    max-height: 150px;
    display: block;
    margin: 10px auto;
    box-shadow: 0 2px 4px 0 rgb(121 146 185 / 54%);
}

.bookbox3 {
    width: 100%;
    box-sizing: border-box;
    margin: 10px;
    text-align: center;
    font: 500 14px normal;
    letter-spacing: 1.1px;
}

.bookname {
    width: auto;
    overflow: hidden;
    text-align: center;
    font: 500 14px normal;
    letter-spacing: 1.1px;
}
</style>